<script setup>
import { ref, onMounted, reactive } from 'vue'
import Menu from './Menu.vue';

const props = defineProps({
  msg: {
    type: String,
    required: true
  },
  mode: {
    type: Boolean,
    required: false,
    default(){
        return false
    }
  },
  nobg: {
    type: Boolean,
    required: false,
    default(){
        return false
    }
  },
  menu: {
    type: Object,
    required: false,
    default(){
        return [
            {name:'首页',url:'/'},
            {name:'关于我们',url:'/about'},
            {name:'业务领域',url:'/services'},
            {name:'产品中心',url:'/products'},
            {name:'质量控制',url:'/qualitys'},
            {name:'新闻中心',url:'/newscenter'},
            {name:'联系我们',url:'/contacts'}
        ]
    }
  },
  language: {
    type: Object,
    required: false,
    default(){
        return [
            {name:'CN',title:'中文',selected:true},
            {name:'EN',title:'English',selected:false}
        ]
    }
  },
  languageIndex:{
    type: Number,
    required: false,
    default(){
      return 0
    }
  },
  isLanguage:{
    type: Boolean,
    required: false,
    default(){
      return false
    }
  },
  lit: {
    type: Array,
    required: false,
    default(){
      return [0]
    }
  },
  menuShow: {
    type:Object,
    required: false,
    default(){
      return false
    }
  },
  IsSwitchScreen:{
    type : Boolean,
    required: false,
    default(){
      return false
    }
  }
})

const model = defineModel();
changeModelValue();

function handleScroll(e){
    e.preventDefault();
    console.log('开始禁用默认滚轮事件');
    changeModelValue();
}
ref.prototype.switchScreen_current = Math.floor((window.scrollY || document.documentElement.scrollTop)/window.screen.height);
function changeModelValue(){
    // 这里处理滚动事件，例如获取滚动位置等
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const cut = Math.floor(scrollTop/window.innerHeight);
    // console.log('滚动位置:', scrollTop);
    // 根据滚动位置执行其他操作...
    if(props.lit.includes(cut)){
      model.value = true
    }else{
      model.value = false;
    }

    console.log('执行changeModelValue')

}
function useSwitchScreen(){
  let vector = ref.prototype.switchScreen_vector || 0;
  let cut = ref.prototype.switchScreen_current || Math.floor((window.scrollY || document.documentElement.scrollTop)/window.screen.height);
  let pageHeight = ref.prototype.switchScreen_pageHeight || document.body.clientHeight;
  let totleScreen = ref.prototype.switchScreen_totleScreen || Math.ceil(pageHeight/window.screen.height);

  cut = cut + vector;
  console.log(' cut:',cut,' pageHeight:',pageHeight,' totleScreen:',totleScreen, ' vector:',vector);
  if(cut<0) cut = 0;
  if(cut>totleScreen) cut = totleScreen;
  if(props.lit.includes(cut)){
      model.value = true
    }else{
      model.value = false;
    }
    window.scrollTo({
        left: 0,
        top: cut*window.innerHeight,
        behavior: 'smooth'
    });
    ref.prototype.switchScreen_current = cut;
}
let touchStartY, touchEndY;
function handleSwitchScreen(e){
  e = e ||  window.event;
  let vector = 0;
  if(isWheelEvent(e)){
    if (e.wheelDelta){
      if (e.wheelDelta < 0)vector = 1;
      if (e.wheelDelta > 0)vector = -1;
    }else if(e.detail){
      if(e.detail < 0) vector = 1;
      if(e.detail > 0) vector = -1;
    }

  }else if(isTouchEvent(e)){
    // console.log('e.touches:',e.touches[0]);
    touchEndY = e.touches[0].pageY;
    if((touchStartY-touchEndY) > 30) vector = 1;
    if((touchStartY-touchEndY) < -30) vector = -1;
    if(ref.prototype.switchScreen_noTouch||false){
      return;
    }
  }
  ref.prototype.switchScreen_vector = vector;
  e.preventDefault();

  debounce(useSwitchScreen,256);
}

function handleTouchPoint(e){
  // touchStartX = e.touches[0].pageX;
  touchStartY = e.touches[0].pageY;
  console.log('touchStartY:',touchStartY);
  if([3,4].includes(Math.floor((window.scrollY || document.documentElement.scrollTop)/window.screen.height))){
    ref.prototype.switchScreen_noTouch = true
  }else{
    ref.prototype.switchScreen_noTouch = false
  }
}

function handleTouchEnd(e){
  let event = e ||  window.event ;
  let _touchEndY = event.changedTouches[0].pageY;
  let _current = ref.prototype.switchScreen_current;
  let _vector = 0;
  let _scaleT = (window.scrollY || document.documentElement.scrollTop)/window.screen.height;
  // console.log('touchEnd: _cut:',_current, ' _scaleT:',_scaleT,' _vector:',_vector, ' _touchEndY:',_touchEndY);
  if(ref.prototype.switchScreen_noTouch||false){
    if((touchStartY-_touchEndY) > 0) _vector = 1;
    if((touchStartY-_touchEndY) < 0) _vector = -1;
    if(_vector>0){
      if(Math.ceil(_scaleT)==_current){
        return
      }
    }
    if(_vector<0){
      if(Math.floor(_scaleT)==_current){
        return
      }
    }
    
    event.preventDefault();
    ref.prototype.switchScreen_vector = _vector;
    debounce(useSwitchScreen,256);
  }
}

function isTouchEvent(event) {
  return 'touches' in event || 'changedTouches' in event;
}
 
function isWheelEvent(event) {
  return 'deltaY' in event;
}


// 防抖函数
function debounce(func, delay) {
  let funcName = 'debounce_' + func.name;
  if (ref.prototype[funcName]) clearTimeout(ref.prototype[funcName]);
  ref.prototype[funcName] = setTimeout(func, delay);
}

onMounted(() => {
  // console.log('组件已经挂载')
  // window.addEventListener('scroll', handleScroll);
  if(props.IsSwitchScreen){
    window.addEventListener('wheel', handleSwitchScreen, {passive:false});
    window.addEventListener('touchmove', handleSwitchScreen, {passive:false});
    window.addEventListener('touchstart', handleTouchPoint, {passive:false});
    window.addEventListener('touchend', handleTouchEnd, {passive:false});
  }
  function UnTouch(){
    window.removeEventListener('touchmove');
    window.removeEventListener('touchstart');
  }
  function regTouch(){
    window.addEventListener('touchmove', handleSwitchScreen, {passive:false});
    window.addEventListener('touchstart', handleTouchPoint);
  }
})
const count = ref(0)
</script>

<template>
    <div class="w-screen fixed z-50 justify-center flex" :class="{'bg-white': !model && !nobg}">
      <div class="container w-full">
        <div class="w-full flex py-[16] self-center" :class="[model ? 'text-white': 'text-black', 'text-red']">
            <div class="w-[144] flex-none self-center mobile:w-auto mobile:h-12">
              <a href="/"><img class="h-[72px] mobile:h-12" :src="[ model ? '/src/assets/logo.png' : '/src/assets/logo_2.png']"></a>
            </div>
            <div class="w-full flex-auto flex self-center " :class="[menuShow?'mobile:menuShow' :'mobile:hidden']">
                <div class="flex-auto flex" @click="menuShow=false"></div>
                <div class="flex-none mobile:menu-content mobile:py-12 mobile:text-center mobile:leading-10">
                  <div class="hidden w-full self-center mobile:block"><a href="/"><img class="mx-auto" src="/src/assets/logo_2.png" alt=""></a></div>
                  <Menu :menu="menu" /> 
                </div>
            </div>
            <div class="w-64 mobile:w-50 flex-none self-center mobile:flex-auto">
                <div class="w-fit rounded-3xl p-2 bg-white mobile:bg-transparent text-black mobile:text-inherit float-right border-2 mobile:text-sm relative whitespace-normal hover:active mobile:border-0">
                    <div class="w-full block mobile:text-2xl" @click="isLanguage=!isLanguage"><span class="px-2 font-semibold border-r border-1 mobile:border-0">{{language[languageIndex].name}}</span> <span class="w-16 px-2 text-gray3 inline-block mobile:hidden">
                      {{language[languageIndex].title}}</span> <span class="w-6 fa fa-angle-down fa-lg inline mobile:!hidden"></span></div>
                    <div class="w-4/5 py-6 absolute right-0 top-120 leading-10 down mobile:w-[90px]">
                      <div class="w-full rounded-2xl bg-white border-2 text-black p-1 float-right">
                        <div class="block rounded-xl text-gray3 hover:text-hovercolor hover:bg-undergray" v-for="(item, index) in language" :key="index" @click="languageIndex=index,isLanguage=!isLanguage" :class="{'text-hovercolor':languageIndex==index}"><span class="w-16 px-2 inline-block">
                          {{item.title}}</span></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="w-12 flex-none self-center text-center md:hidden" @click="menuShow = !menuShow">
              <span class="fa fa-bars fa-2x self-center"></span>
            </div>
        </div>
      </div>
    </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.container{
  max-width: 1780px;
}
.down{
  display: none;
}
div:hover>.down,.active>.down{
  display: block;
}
</style>
